<script setup lang="ts">
import { formatTime } from '@/pages/integral/helper'
import { getTaskList, saveTaskDel, saveTaskFn } from '@fl/api/anjutong'
import { ElMessage, ElPagination, ElTable } from 'element-plus'
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

import type { saveTaskAjaxType } from './type/index'
import type { listType } from './type/list-type'

import { TaskObj } from './type/list-type'

const router = useRouter()
const taskData = reactive<any>(new TaskObj())

async function getTaskListFn() {
    const param = {
        page: taskData.pages,
        size: taskData.size,
    }
    const data = await getTaskList(param)
    console.log(data)

    const { records = [], total } = data
    // taskData.size = size
    // taskData.pages = pages
    taskData.total = total
    if (data) {
        taskData.basicTask = records.filter((item: { statu: boolean, status: boolean, taskType: number }) => {
            item.statu = !item.status
            return item.taskType === 0
        })
        taskData.customTask = records.filter((item: { statu: boolean, status: boolean, taskType: number }) => {
            item.statu = !item.status
            return item.taskType === 1
        })
    }
}
onMounted(() => {
    getTaskListFn()
})
// 编辑
function toUpdateTask(row: listType, type: number) {
    router.push({
        path: '/member-center/task/saveTask',
        query: {
            row: JSON.stringify(row),
            type,
        },
    })
}
// 删除
async function todel(row: listType) {
    if (row.id) {
        const data = await saveTaskDel(row.id)
        console.log(data)

        //   let {data,code,msg}=data;

        if (data) {
            ElMessage.success('删除成功')
            getTaskListFn()
        }
    }
}
// 新建自定义任务
function toSaveTask() {
    router.push({
        path: '/member-center/task/saveTask',
        query: {
            type: 1,
        },
    })
}

function sizeChange(val: number) {
    console.log(val)

    taskData.size = val
    getTaskListFn()
}
function handleCurrentChange(val: number) {
    console.log(val)
    taskData.pages = val
    getTaskListFn()
}

async function switchChange(val: any) {
    const param: saveTaskAjaxType = {
        growth: val.growInp ? val.growInp : 0,
        id: val.id,
        point: val.point ? val.point : 0,
        status: val.statu ? 0 : 1,
        taskDesc: val.taskDesc,
        taskName: val.taskName,
        taskNo: val.taskNo,
        taskType: val.taskType,
    }
    const type = 1
    await saveTaskFn(param, type)
    getTaskListFn()
}
</script>

<template>
    <div class="task-list">
        <div class="task-title">
            基础任务
        </div>

        <ElTable :data="taskData.basicTask"
                 border
        >
            <el-table-column type="index"
                             label="序号"
                             width="60"
            />

            <el-table-column label="任务名称"
                             prop="taskName"
            />

            <el-table-column label="任务编号"
                             prop="taskNo"
            />

            <el-table-column label="任务说明"
                             prop="taskDesc"
            />

            <el-table-column label="更新时间"
                             prop="updateTime"
            >
                <template #default="scope">
                    {{ scope.row.updateTime ? formatTime(scope.row.updateTime, 'YYYY-MM-DD hh:mm:ss') : '-' }}
                </template>
            </el-table-column>

            <el-table-column label="任务状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.statu"
                               @change="switchChange(scope.row)"
                    />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link
                               @click="toUpdateTask(scope.row, 0)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </ElTable>
    </div>

    <div class="task-list">
        <div class="align-center mb-10 flex justify-between">
            <span>自定义任务</span>

            <el-button type="primary"
                       @click="toSaveTask"
            >
                新建
            </el-button>
        </div>

        <ElTable :data="taskData.customTask"
                 border
        >
            <el-table-column type="index"
                             label="序号"
                             width="60"
            />

            <el-table-column label="任务名称"
                             prop="taskName"
            />

            <el-table-column label="任务编号"
                             prop="taskNo"
            />

            <el-table-column label="任务说明"
                             prop="taskDesc"
            />

            <el-table-column label="更新时间"
                             prop="updateTime"
            >
                <template #default="scope">
                    {{ scope.row.updateTime ? formatTime(scope.row.updateTime, 'YYYY-MM-DD hh:mm:ss') : '-' }}
                </template>
            </el-table-column>

            <el-table-column label="任务状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.statu"
                               @change="switchChange(scope.row)"
                    />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link
                               @click="toUpdateTask(scope.row, 1)"
                    >
                        编辑
                    </el-button>

                    <el-button link
                               @click="todel(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </ElTable>

        <ElPagination layout="prev, pager, next"
                      :total="taskData.total"
                      @current-change="handleCurrentChange"
                      @size-change="sizeChange"
        />
    </div>
</template>

<style lang="scss" scoped>
    .task-list {
    padding: 20px;
    background: #fff;

    .task-title {
        height: 80px;
        font-size: 2 0;
        line-height: 80px;
    }

    .fl {
        display: flex;
        justify-content: space-between;
    }
}
</style>
